<template>
    <div class="top-line">
        <div class="title_box">
            <div class="icon" :style="`--icon: url(${ base_url }/static/icon/music-list-icon.svg); --icon-size: 100%`"></div>
            <div class="text">
                <div class="title">歌曲列表</div>
                <div class="count">（148）</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { base_url } from '@/server/config';
</script>

<style scoped lang="less">
.top-line {
    padding-bottom: 5vw;
}

.title_box {
    display: flex;
    align-items: center;
    gap: 3vw;

    .icon {
        --size: 5vw;
        width: var(--size);
        height: var(--size);
    }

    .text {
        display: flex;
        align-items: center;

        .title {
            font-size: 4vw;
            font-weight: 900;
            color: #666;
        }

        .count {
            font-size: 3.5vw;
            color: #aaa;
        }
    }
}
</style>